<template>
	<view class="to-void">
		<view class="label">
			<text>作废原因：</text>
		</view>
		<view class="content">
			<textarea v-model="cancelReason" placeholder="请输入作废原因" maxlength="100" />
		</view>
		<view class="num-count">
			<text>{{cancelReason.length}}/100</text>
		</view>
		<view class="label">
			<text>作废凭据：</text>
		</view>
		<view class="file-list clearfix">
			<view class="file-item" v-for="(item,index) in fileList">
				<image class="file-img" :src="item.temp" mode="aspectFit"></image>
				<view class="file-del" @click="fileDel(index)"></view>
			</view>
			<view class="file-item file-upload-btn" @click="selectFile"></view>
		</view>
		<view class="add-btn shadow" @click="submitVoid">
			<text>提交</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList: [],
				cancelReason: "",
				fileObj: {},
				info: {}
			};
		},
		onLoad(option) {
			this.info = option.param ? JSON.parse(option.param) : {};
			// console.log(this.info);
		},
		computed: {
			userType() {
				return this.$store.state.userInfo.userRoleType == 2 ? 0 : 1;
			}
		},
		methods: {
			submitVoid() {
				if (!this.cancelReason) {
					uni.showToast({
						title: '请输入作废原因',
						icon: 'none'
					})
					return false;
				}
				const formData = {
					id: this.info.id,
					taskId: this.info.taskId,
					approvalState: 1,
					cancelReason: this.cancelReason,
					cancelPic: this.fileList.map((item) => {
						return item.upload;
					}).join(','),
					personType: this.userType,
					vehCode: this.info.vehCode,
				}
				// console.log(formData)
				this.$api.busibillUpdate(formData).then((res) => {
					// console.log(res)
					uni.showToast({
						title: '已作废运单',
						icon: "none",
						success() {
							setTimeout(() => {
								let pages = getCurrentPages(); // 当前页面        
								let beforePage = pages[pages.length - 2]; // 上上一页 
								uni.navigateBack({
									success: () => {
										beforePage.$vm.refresherList();
									}
								});
							}, 1500); // showToast默认时间
						}
					});
				})
			},
			selectFile() {
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						// console.log(chooseImageRes)
						uni.uploadFile({
							url: 'data-dispatch/upload/toFileManager',
							filePath: chooseImageRes.tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								const fileData = uploadFileRes.data ? JSON.parse(uploadFileRes
									.data) : ''
								if (fileData && fileData.code == 200) {
									// console.log(fileData.data)
									this.fileList.push({
										upload: fileData.data.path,
										temp: chooseImageRes.tempFilePaths[0]
									})
								}
							}
						});
					}
				});
			},
			fileDel(index) {
				this.fileList.splice(index, 1)
			},
		}
	}
</script>

<style lang="scss">
	.to-void {
		padding: 20rpx;

		.add-btn {
			background-color: $app-color;
			font-size: 34rpx;
			line-height: 3em;
			border-radius: 3em;
			text-align: center;
			font-weight: bold;
		}

		.label {
			line-height: 2em;
			font-size: 34rpx;
			margin-bottom: 0.5em;
			color: #444;
		}

		.num-count {
			text-align: right;
			line-height: 3em;
			color: #666;
		}

		.content {
			border: 5rpx solid $app-color;
			border-radius: 8rpx;

			textarea {
				padding: 20rpx;
				height: 9em;
				box-sizing: border-box;
				width: 100%;
				line-height: 1.5em;
			}
		}
	}

	.file-list {
		margin-bottom: 50rpx;

		.file-item {
			float: left;
			width: 22%;
			text-align: center;
			height: 20vw;
			line-height: 20vw;
			margin-right: calc(4%);
			position: relative;

			.file-img {
				max-width: 100%;
				max-height: 100%;
				vertical-align: middle;
			}

			.file-del {
				position: absolute;
				right: 0;
				top: 0;
				transform: translate(30%, -30%);
				border-radius: 50%;
				width: 0;
				height: 0;
				border: 20rpx solid #f00;

				&::after {
					content: "";
					width: 20rpx;
					display: block;
					transform: translate(-50%, -50%);
					background-color: #ffffff;
					height: 4rpx;
				}
			}

			&:nth-child(4n) {
				margin-right: 0;
			}

			&:nth-child(n+5) {
				margin-top: calc(4% / 3);
			}

		}

		.file-upload-btn {
			box-sizing: border-box;
			border: 1rpx solid #ddd;
			background: url('@/static/image/camera.png') no-repeat center;
			background-size: 70%;
		}
	}
</style>
